<template>
	<div class="p_Login_yanzheng1">
		<div class="p_Login_Return">
			<a href="javascript:history.back(-1)"><img src="../../assets/login/返回.png" /></a>
			<span>注册</span>
		</div>
		<span class="p_Login_phone">你输入的手机号是:{{$route.params.phone}}</span>
		<span class="p_Login_number" ref='aa'>验证码是: <em></em></span>
		<span class="p_Login_input2" >
       		<input type="text" placeholder="请输入短信验证码" v-model="brr" />
       	</span>
		<span class="p_Login_input2">
       		<input type="text" placeholder="请输入密码" v-model="psw" />
       	</span>
       	<div class="select">
       			<input type="checkbox"   @click='judge'/>同意注册
       	</div>       
       	
		<a id="getstr" >
			<button class="huakuai" :disabled="mm" @click="getstr()">完成注册</button>
		</a>
		
	</div>
</template>

<script>

	export default {
		name: 'yanzheng',
		data() {
			return {
				brr: "",
				href:'#/userzhuce',
				psw:'',
				mm:true,
				mx:true
			}
		},
		methods: {
			judge:function(){
				var bol = $('.select input').is(':checked')
			  	if(bol &&this.psw && this.brr){
			  		this.mm = false;
			  	}else{
			  		this.mm = true;
			  	}
			},
			getstr:function(){
				if(this.$refs.aa == this.brr ){//用户注册
					var _this = this;
			            this.axios.get('http://localhost:3000/router/add',{
							params:{
									phone:_this.$route.params.phone,
									psw:_this.psw,
									condition:_this.sql.user.add
								}
						}).then(function(res){
							if(res.data.msg.err){
								//缓存数据
								var obj = {
									phone:_this.$route.params.phone,
									psw: _this.psw
								}
								var arry = [];
								arry.push(obj);
								var ll = []
								localStorage.setItem('obj',JSON.stringify(arry));								
								console.log('注册成功');
								window.location.href = _this.href;	
							}
						})
				}else {
					console.log('验证码错误')
				}
			}
		},
		mounted() {
			var _this = this;
			$(function() {
				var r = ranmun(0, 9).toString();
				var g = ranmun(0, 9);
				var c = ranmun(0, 9).toString();
				var d = ranmun(0, 9);
				var str = r+ g + c + d;
				_this.$refs.aa = str ;
				$(".p_Login_number em").html(str);
				function ranmun(a, b) {
					return Math.floor(Math.random() * (b - a + 1) - a);
				}

			})

		}
		
	}
</script>

<style scoped>
	.p_Login_Return img {
		width: 10%;
		margin: 2%;
	}
	
	.p_Login_Return span {
		display: inline-block;
		margin-left: 7rem;
		width: 50%;
		vertical-align: 1rem;
		font-size: 2rem;
	}
	
	.p_Login_phone {
		margin: 3rem auto 0 auto;
		display: block;
		width: 80%;
		font-size: 1.5rem;
	}
	
	.p_Login_number {
		margin: 2rem auto;
		display: block;
		width: 80%;
		font-size: 1rem;
	}
	
	.p_Login_input2 {
		background: url(../../assets/login/锁.png)no-repeat 0 12px;
		background-size: 1.5rem 1.5rem;
		display: inline-block;
		width: 80%;
		padding-bottom: 3%;
		border-bottom: 1px solid #999;
		margin-left: 10%;
	}
	
	.p_Login_input2 input {
		margin-top: 5%;
		margin-left: 3rem;
		border: none;
		outline: none;
		width: 100%;
		height: 2rem;
		color: #999;
	}
	#getstr{
		display: block;
		width: 80%;
		height: 6rem;
		margin: 0 auto;
	}
	
	.huakuai {
		width: 100%;
		height: 100%;
		background-color: rgb(255, 129, 173);
		border-radius: 2rem;
		border: none;
		outline: none;
		font-size: 1.5rem;
		color: white;
	}
	.select{
		width: 60%;
		margin: 2rem auto ;
		height: 3rem;
		font-size: 1.5rem;
	}
	.select input[type=checkbox]{
		width: 2rem;
		height: 2rem;
		vertical-align: -37%;
		margin-right: 2rem;
	}
</style>